<template>
    <view>
        <view class="money-type">
            <view class="money-type--i" :style="money_type__i_hover" @click="clickMoneyType('i')">收入</view>
            <view class="money-type--o" :style="money_type__o_hover" @click="clickMoneyType('o')">支出</view>
        </view>

        <view>
            <view class='title'>金额</view>
            <input class="input money-input" focus placeholder="0.00" type="number" value="" v-model="money" />
        </view>

        <view class='title'>分类</view>
        <view v-if="moneyType=='i'" class="type" v-for="(item,index) in typeItemsI" :keys='item[index]'>
            <view :class="(index==typeIsChoose?'type-item-choose':'type-item')" @click="chooseIType(index)">
                {{item.name}}
            </view>
        </view>

        <view v-if="moneyType=='o'" class="type" v-for="(item,index) in typeItemsO" :keys='item[index]'>
            <view :class="(index==typeIsChoose?'type-item-choose':'type-item')" @click="chooseOType(index)">
                {{item.name}}
            </view>
        </view>
        <view>
            <view class='title'>日期</view>
            <view class=" input date-input">
                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                    <view class="uni-input">{{date}}</view>
                </picker>
            </view>
        </view>
        <view>
            <view class='title'>备注</view>
            <input class="input comment-input" placeholder="在此处添加备注" maxlength="500" type="text" value="" v-model="comment" />
        </view>
        <view class="btn" style="margin-top: 100rpx;">
            <button type="primary" @click="submitItAndOneMore()">保存并再来一笔</button>
        </view>
        <view class="btn">
            <button type="primary" @click="submitIt()">记一笔</button>
        </view>
    </view>
</template>

<script>
    import util from '../../common/script/util.js';
    export default {
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                typeIsChoose:null,//被选择的类型的下标
                money: '',
                comment: '',
                date: currentDate,
                typeItemsI: [{
                        type: 'i001',
                        name: '工资'
                    },
                ],
                typeItemsO: [{
                        type: 'o001',
                        name: '餐饮买菜'
                    },
                ],
                moneyType: 'o', //类型,收入或支出,默认支出
                subType:'',//细类型
                money_type__i_hover: {
                    // 'background-color': '#2b85e4',
                    // 'color': 'white',
                },
                money_type__o_hover: {
                    'background-color': '#2b85e4',
                    'color': 'white',
                },
                doc_files: [] //_doc文件夹下的文件
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        onLoad() {
            let isOpenDB = util.db.isOpenDB();
            if(!isOpenDB){
                console.log("现在打");
                util.db.openDB();
            }else{
                console.log("已经打开了");
            }
            
            this.getOType();
            this.getIType();
        },
        methods: {
            chooseIType:function(index){
                this.subType = this.typeItemsI[index].type;
                this.typeIsChoose = index;
                console.log(this.subType);
            },
            chooseOType:function(index){
                this.subType = this.typeItemsO[index].type;
                this.typeIsChoose = index;
                console.log(this.subType);
            },
            getOType: function() {
                let _self = this;
                let sql = 'select * from base_table_type where type like "o%"'
                util.db.selectSQL(sql,
                    function(res){
                        console.log(res);
                        _self.typeItemsO = res
                        console.log(_self.typeItemsO);
                    },
                    function(res){
                        console.log(res);
                    }
                )
            },
            getIType: function() {
                let _self = this;
                let sql = 'select * from base_table_type where type like "i%"'
                util.db.selectSQL(sql,
                    function(res){
                        console.log(res);
                        _self.typeItemsI = res
                        console.log(_self.typeItemsI);
                    },
                    function(res){
                        console.log(res);
                    }
                )
            },
            submitIt() {
                let _self = this;
                //trim
                _self.money = _self.money.trim();
                _self.comment = _self.comment.trim();
                //empty
               let empty1 = (
                _self.money == "" || _self.money == undefined || _self.money == null||
                _self.comment == "" || _self.comment == undefined || _self.comment == null||
                _self.subType == "" || _self.subType == undefined || _self.subType == null
               );
               console.log(empty1);
               if(empty1){
                   uni.showToast({
                       title:"请将数据填写完整!",
                       position:"bottom"
                   })
                   return;
               }
               let sql = 'insert into main_table (maney,type,date,comment) values ('+_self.money+',"'+_self.subType+'","'+_self.date+'","'+_self.comment+'")';
               console.log(sql);
               util.db.selectSQL(sql,
                   res=>{
                       console.log(res)
                       uni.showToast({
                           title:"添加成功!"
                       })
                       setTimeout(()=>{uni.navigateBack()},500)
                   },
                   res=>{
                       console.log(res)
                       uni.showToast({
                           title:"添加失败!",
                           position:'bottom'
                       })
                   }
               )
            },
            submitItAndOneMore() {
                console.log('submitItAndOneMore');
                let _self = this;
                 //trim
                 _self.money = _self.money.trim();
                 _self.comment = _self.comment.trim();
                 //empty
                let empty1 = (
                 _self.money == "" || _self.money == undefined || _self.money == null||
                 _self.comment == "" || _self.comment == undefined || _self.comment == null||
                 _self.subType == "" || _self.subType == undefined || _self.subType == null
                );
                console.log(empty1);
                if(empty1){
                    uni.showToast({
                        title:"请将数据填写完整!",
                        position:"bottom"
                    })
                    return;
                }
                let sql = 'insert into main_table (maney,type,date,comment) values ('+_self.money+',"'+_self.subType+'","'+_self.date+'","'+_self.comment+'")';
                console.log(sql);
                util.db.selectSQL(sql,
                    res=>{
                        console.log(res)
                        uni.showToast({
                            title:"添加成功!"
                        })
                        
                        setTimeout(()=>{
                            _self.money = '';
                            _self.comment = '';
                        },300)
                        
                    },
                    res=>{
                        console.log(res)
                        uni.showToast({
                            title:"添加失败!",
                            position:'bottom'
                        })
                    }
                )
                
            },
            copyDB: function() {
                plus.io.resolveLocalFileSystemURL("_www/static/db/wd.db",
                    function(entry) {
                        console.log(entry.fullPath);
                        //拿到源文件
                        plus.io.resolveLocalFileSystemURL("_doc/",
                            function(docRoot) {
                                console.log(docRoot.fullPath);
                                //拿到目标文件夹
                                let newName = "wd.db"; //指定赋值过去之后文件名
                                entry.copyTo(docRoot, newName,
                                    function(success) {
                                        console.log(success);
                                    },
                                    function(e) {
                                        console.log(e);
                                        if (e.code == 10) {
                                            console.log("已存在db文件" + JSON.stringify(e));
                                        } else {
                                            console.log("错误" + JSON.stringify(e));
                                        }
                                    }
                                )
                            }
                        )
                    },
                    function(e) {
                        console.log("错误" + JSON.stringify(e));
                    }
                )
            },
            
            
            bindDateChange: function(e) {
                this.date = e.target.value
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 1;
                } else if (type === 'end') {
                    year = year + 1;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            clickMoneyType(e) {
                this.typeIsChoose = null;
                console.log(e);
                if (e == 'i') {
                    this.moneyType = 'i';
                    this.money_type__i_hover = {
                        'background-color': '#2b85e4',
                        'color': 'white',
                    };
                    this.money_type__o_hover = {
                        // 'background-color': '#2b85e4',
                        // 'color': 'white',
                    };
                } else if (e == 'o') {
                    this.moneyType = 'o';
                    this.money_type__i_hover = {
                        // 'background-color': '#2b85e4',
                        // 'color': 'white',
                    };
                    this.money_type__o_hover = {
                        'background-color': '#2b85e4',
                        'color': 'white',
                    };
                }
                console.log('选择了我');
            },
            // 打开数据库
            openDB: function() {
                console.log(this.openDB);
                plus.sqlite.openDatabase({
                    name: 'wd4',
                    path: '_doc/wd.db',
                    success: function(e) {
                        console.log('openDatabase success!' + JSON.stringify(e));
                    },
                    fail: function(e) {
                        console.log('openDatabase failed: ' + JSON.stringify(e));
                    }
                });
            },
            // 查询SQL语句
            executeSQL: function() {
                plus.sqlite.selectSql({
                    name: 'wd4',
                    sql: this.sqlForTest,
                    success: function(data) {
                        console.log('selectSql success: ');
                        for (var i in data) {
                            console.log(data[i]);
                        }
                    },
                    fail: function(e) {
                        console.log('selectSql failed: ' + JSON.stringify(e));
                    }
                });
            },
        }
    }
</script>

<style>
    .input,
    .title {
        padding-left: 22rpx;
    }

    .type {
        display: flex;
        display: inline-block;
    }

    .type-item {
        background-color: white;
        color: #2b85e4;

        border: 2rpx solid #2b85e4;
        border-radius: 10px;
        padding-left: 10rpx;
        padding-right: 10rpx;
        margin: 5rpx;
    }

    .type-item-choose {
        /* background-color: white;
        color: #2b85e4; */
        
        border: 2rpx solid #2b85e4;
        border-radius: 10px;
        padding-left: 10rpx;
        padding-right: 10rpx;
        margin: 5rpx;
        
        background-color: #2b85e4;
        color: white;
    }

    .money-type {
        display: flex;
        margin-top: 20rpx;
        align-items: center;
        justify-content: center;
    }

    .money-type--i,
    .money-type--o {
        width: 250rpx;
        text-align: center;

        border: 2rpx solid #2b85e4;
        color: #2b85e4;
    }

    /*    .money-type--i:hover,.money-type--o:hover{
        background-color: #2b85e4;
        color: white;
    } */
    .title {
        font-size: 14rpx;
        background-color: #EEEEEE;
        margin-top: 28rpx;
        color: #6E6E6E;
        line-height: 1.8em;
    }

    .money-input {
        font-size: 60rpx;
    }

    .date-input {
        /* color: #6E6E6E; */
        font-size: 60rpx;
    }

    .comment-input {
        font-size: 28rpx;
    }

    .btn {
        margin-top: 22rpx;
        padding-left: 150rpx;
        padding-right: 150rpx;
    }
</style>
